<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <title>Synthetic Typing Test</title>
        <style type='text/css'>
            body {font-family: verdana}
			td {text-align: right}
            td:nth-child(even) {background: #CCd}
			#key th:nth-child(even) {background: #CCf}
			#who th:nth-child(even) {background: #fCb}
        </style>
    </head>
    <body>
<h1>Key Recorder</h1>
<p id='ua' tabindex='2'></p>
<div>
	Type 'a'
	<input id='t_a' />
</div>
<div>
	Type  [backspace]
	<input id='t_\\b' /> - specialChars
</div>
<div>
	Type [Enter]
	<input id='t_\\r' /> - function
</div>
<div>
	Type and hold [down]
	<input id='t_down' /> - navigation
</div>
<div>
	Type and hold [shift]
	<input id='t_shift' /> - special
</div>
<div>
	Type [b]
	<input id='keyUpPrevent' /> - preventDefault keydown
</div>
<div>
	Type [c]
	<input id='keyPressPrevent' /> - preventDefault keypress
</div>
<div>
	Type [tab]
	<input id='t_\\t' /><input id='t_tab2' />
</div>
<div>
	Type [pause-break]
	<input id='t_pause-break' />
</div>
<div>
	Type [caps]
	<input id='t_caps' />
</div>
<div>
	Type [escape]
	<input id='t_escape' />
</div>
<div>
	Type [num-lock]
	<input id='t_num-lock' />
</div>
<div>
	Type [scrolllock]
	<input id='t_scroll-lock' />
</div>
<div>
	Type [print]
	<input id='t_print' />
</div>
<div>
	Type [f8]
	<input id='t_f8' /> - function
</div>

<div id='leftClick'>
	Left Click Me
</div>
<div id='rightClick'>
	Right Click Me
</div>
<div id='dblClick'>
	Double Click Me
</div>
<h3>Key Data</h3>
<pre id='out'></pre>
<h3>Click Data</h3>
<pre id='clickdata'></pre>
<script type='text/javascript' src='../../steal/steal.js'></script>
<script type='text/javascript'>
	steal.plugins('funcunit/syn','jquery','jquery/lang/json').start();
</script>
<script type='text/javascript' id="demo-source">
	var gId = function(id){
		return document.getElementById(id)
	},
	bind = function(el, ev, func){
		Syn.bind(gId(el.replace("\\","\\\\")), ev,func);
	};
	$(function(){
		$("#ua").html(window.navigator.userAgent)
	});
	
	var keycodes = Syn.keycodes,
	special = {
		backspace : "\b",
		tab : "\t",
		enter : "\r"
	},
	convert = {
		"\\r" : "\r",
		"\\t" :"\t",
		"\\b" : "\b"
	}
	
	isKey = function(str, val){
		str = convert[str] || str;
		return keycodes[str] ===  String(val)
	}
	isChar = function(str, val){
		str = convert[str] || str;
		return val && (special[str] || str).charCodeAt(0) == val
	}
	keyOrChar = function(str, val){
		return isKey(str,val) ? "key" : 
			(isChar(str, val) ? "char" : val)
	}
	tests= ['prevent']
	data= {
		prevent :{
			keyup : [],
			keydown : [],
			keypress :[]
		}
	};
	
	binder = function(name,test){
		//listen for events
		test = test || name;
		var testData = (data[test] = {}),
			keydown = 0,
			keypress= 0
			keyup = 0;
		
		bind('t_'+name,'keydown', function(ev){
			testData.keydown = [ (isChar(name, ev.charCode) ?  "char" : ev.charCode),
						   keyOrChar(name, ev.keyCode)];
		    keydown++
			if(keydown ==2 ){
				//testData.repeat.push('keydown')
			}
		})
		
		bind('t_'+name,'keypress', function(ev){
			testData.keypress = [ (isChar(name, ev.charCode) ?  "char" : ev.charCode),
						   keyOrChar(name, ev.keyCode)]
		    
			keypress++;
			
			if(keypress ==2 ){
				//testData.repeat.push('keypress')
			}
			update();
		})
		
		bind('t_'+name,'keyup', function(ev){
			testData.keyup = [ (isChar(name, ev.charCode) ?  "char" : ev.charCode),
						   keyOrChar(name, ev.keyCode)]
		    keyup++;
			if(keyup ==2 ){
				//testData.repeat.push('keyup')
			}
			
			update();
			
		})
		
		
		
		$('#t_'+name).val("")
		tests.push(test)
	}
	binder('a','character')
	binder('\\b','specialChars')
	binder('down','navigation')
	binder('shift','special')
	binder('\\t')
	bind('t_tab2','keyup', function(ev){
		data["\\t"].keyup = [ (isChar("\\t", ev.charCode) ?  "char" : ev.charCode),
						   keyOrChar("\\t", ev.keyCode)]
	    update();
	})
	binder('pause-break')
	binder('caps')
	binder('escape')
	binder('num-lock')
	binder('scroll-lock')
	binder('print')
	binder('f8','function')
	binder('\\r')
	var pd = function(ev){
		if(ev.preventDefault)
			ev.preventDefault();

		ev.returnValue = false;
	}
	var keyDown_keyPressed = false
	bind('keyUpPrevent','keydown', function(ev){
		pd(ev);
		setTimeout(function(){
			if($('#keyUpPrevent').val() !== 'b'){
				data.prevent.keydown.push('char')
			}
			if(!keyDown_keyPressed){
				data.prevent.keydown.push('keypress')
			}
			update();
		},1000)
	})
	bind('keyUpPrevent','keypress', function(ev){
		keyDown_keyPressed = true;
	})


	var keyPress_keyUp = false
	bind('keyPressPrevent','keypress', function(ev){
		pd(ev);
		setTimeout(function(){
			if($('#keyPressPrevent').val() !== 'c'){
				data.prevent.keypress.push('char')
			}
			if(!keyPress_keyUp){
				data.prevent.keypress.push('keyup')
			}
			update();
		},1000)
	})
	bind('keyPressPrevent','keyup', function(ev){
		keyPress_keyUp = true;
	})
	

	var clickData = {
		right : {},
		left : {},
		dblclick :{}
	}
	$.each(['right','left'], function(i, name){
		
		bind(name+'Click','mousedown',function(ev){
			clickData[name].mousedown = {
				button: ev.button,
				which: ev.which
			}
		})
		bind(name+'Click','mouseup',function(ev){
			clickData[name].mouseup = {
				button: ev.button,
				which: ev.which
			}
			setTimeout(function(){
				$('#clickdata').html($.toJSON(clickData))
			},100)
		})
		bind(name+'Click','click',function(ev){
			clickData[name].click = {
				button: ev.button,
				which: ev.which
			}
		})
		bind(name+'Click','contextmenu',function(ev){
			clickData[name].contextmenu = {
				button: ev.button,
				which: ev.which
			}
		})
		
	})
	var dblClicks = 0
	bind('dblClick','click',function(ev){
		clickData.dblclick.click = (++dblClicks)
	})
	bind('dblClick','dblclick',function(ev){
		clickData.dblclick.dblclick = (1)
		setTimeout(function(){
			$('#clickdata').html($.toJSON(clickData))
		},100)
	})
	update = function(){
		var str = [];
		$.each(tests, function(i, sub){
			str.push("'"+sub+ "':<br/> "+$.toJSON(data[sub])+",")
		})
		
		$('#out').html(str.join("<br/>"))
	}
	
	
</script>
    </body>
</html>